<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/static/favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="alertCardWrapper" style="display: none;">
      <div id="alertCard">
        <i id="alertIcon" class="iconfont"></i>
        <h2 id="alertContent"></h2>
      </div>
    </div>
    <div id="confirmCardWrapper" style="display: none;">
      <div id="confirmCard">
        <h2 id="confirmContent"></h2>
        <div id="confirmButtonWrapper">
          <button id="sureButton">确认</button>
          <button id="cancelButton">取消</button>
        </div>
      </div>
    </div>
    <div id="progressBarWrapper" style="display: none;">
      <div id="progressBar">
        <h2 id="progressTitle">LOADING...</h2>
        <div id="progressLine">
          <div id="progressLineHover"></div>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>

  <script>
    let alertCardWrapper = document.getElementById('alertCardWrapper');
    let confirmCardWrapper = document.getElementById('confirmCardWrapper');
    let progressBarWrapper = document.getElementById('progressBarWrapper');
    alertCardWrapper.style.display = 'flex';
    confirmCardWrapper.style.display = 'flex';
    progressBarWrapper.style.display = 'flex';
  </script>
</html>
